<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--ElementUI CSS-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>The Resource Page</h1>
        <el-button type="primary" plain @click="doSelect">查询我的资源</el-button>
        <el-button type="primary" plain @click="doUpdate">修改我的资源</el-button>

    </div>
    <!--import Vue before Element-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data(){
                return{

                }
            },
            methods: {
                doSelect(){
                    let url = "http://localhost:9000/sso/resource";
                    let token = localStorage.getItem("accessToken")
                    axios.get(url,{headers:{"Authorization":"Bearer" + token}})
                    .then(promise=>{
                        this.$message({
                            showClose: true,
                            message: '恭喜你，查询成功',
                            type: 'success'
                        })
                        console.log(promise.data);
                    })
                    .catch(e=> {
                        if (e.promise.status == 401) {
                            this.$message({
                                showClose: true,
                                message: '请先登录',
                                type: 'warning'
                            })
                            location.href = "/login.html"
                        } else if (e.promise.status == 403) {
                            this.$message({
                                showClose: true,
                                message: '您没有权限',
                                type: 'warning'
                            })
                        }
                        console.log("error", e)
                    })
                },
                doUpdate(){
                    let url = "http://localhost:9000/sso/resource"
                    //获取登录后,存储到浏览器客户端的访问令牌
                    let token = localStorage.getItem("accessToken")
                    console.log("token",token)
                    axios.put(url,"",{headers:{"Authorization":"Bearer"+token}})
                    .then(response =>{
                        this.$message({
                            showClose: true,
                            message: '恭喜你，更新成功',
                            type: 'success'
                        })
                        console.log(response .data)
                    })
                    .catch(e=>{
                        console.log(e)
                        if (e.response .status == 401) {
                            this.$message({
                                showClose: true,
                                message: '请先登录',
                                type: 'warning'
                            })
                            location.href = "/login.html"
                        } else if (e.response .status == 403) {
                            //alert("无权限")
                            this.$message({
                                showClose: true,
                                message: '您没有权限',
                                type: 'warning'
                            })
                        }
                        console.log("error", e)
                    })
                }
            }
        })


    </script>

</body>
</html>